{% from 'article-macro.html' import article_box %}
{% from 'board-macro.html' import board_box %}
{% from 'add-to-board-macro.html' import add_to_board %}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Suu Tap Tin</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable = no">
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="stylesheet" href="/assets/js/plugins/fancybox/helpers/jquery.fancybox-buttons.css?v=1.0.3" type="text/css" media="screen" />
        {% block less %}
        <link rel="stylesheet/less" type="text/css" href="/assets/less/home.less">
        {% endblock %}
        <script src="/assets/js/libs/less-1.3.0.min.js"></script>
        <link rel="stylesheet" href="/assets/js/plugins/fancybox/jquery.fancybox.css?v=2.1.0" type="text/css" media="screen" />
        <link rel="stylesheet" href="/assets/js/plugins/fancybox/helpers/jquery.fancybox-thumbs.css?v=1.0.6" type="text/css" media="screen" />

        <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

        <!-- Le fav and touch icons -->
        <link rel="shortcut icon" href="/assets/img/favicon.ico">
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/assets/ico/apple-touch-icon-144-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/assets/ico/apple-touch-icon-114-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/assets/ico/apple-touch-icon-72-precomposed.png">
        <link rel="apple-touch-icon-precomposed" href="/assets/ico/apple-touch-icon-57-precomposed.png">

    </head>
    <body id="body">
        <div class="wrapper">
            <div class="header">
                <div class="header-txt bottom-green pull-left">
                    <a href="/home/"><h4>Home</h4></a>
                </div>
                <div class="header-txt bottom-blue pull-left hidden-phone">
                    <ul>
                        <li>
                            <a href="/boards/"><h4>Boards</h4></a>
                        </li>
                    </ul>

                </div>
                <div class="header-txt bottom-red pull-left hidden-phone">
                    <ul>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><img src="/assets/img/search.png" /></a>
                        </li>
                    </ul>
                </div>
                {% if user %}
                <div class="pull-right">
                    <ul>
                        <li class="dropdown">
                            <a href="/auth/logout/?redirect-url=/home/" class="dropdown-toggle" data-toggle="dropdown" style="margin-right: 10px;"><img src="/assets/img/shut-down.png" /></a>
                        </li>
                    </ul>
                </div>
                {% endif %}
                {% if user %}
                <div class="header-txt bottom-green pull-right hidden-phone">
                    <ul>
                        <li>
                            <a href="/user/{{ user.id }}/" class="dropdown-toggle" data-toggle="dropdown"><h4>{{ user|username}}</h4></a>                            
                        </li>
                    </ul>
                </div>
                {% else %}
                <div class="header-txt bottom-green pull-right">
                    <ul>
                        <li>
                            <a href="#" id="login"><h4>Login</h4></a>
                        </li>
                    </ul>
                </div>
                {% endif %}
                <div class="input-append pull-right header-search hidden-phone">
                    <input class="span4" size="16" type="text" id="share-link-input" placeholder="Share something ...">
                    <button class="btn btn-success" id="share-link" type="button">
                        Share
                    </button>
                </div>

                <div style="clear:both;"></div>
            </div>
            <div class="content">
                {% block author %}{% endblock %}
                {% block articles %}
                <div class="articles">

                    {% for article in articles %}
                    {{ article_box(article) }}
                    {% endfor %}
                </div>
                <div style="clear:both;"></div>
                <ul class="hidden" id="navigation">
                    {% if cursor %}
                    <li>
                        <a href="/api/article/cursor/?curs={{ cursor }}" id="next">Next</a>
                    </li>
                    {% endif %}
                </ul>
                <img class="loading-gif hidden" src="/assets/img/loader.gif" />

                {% endblock %}
            </div>

        </div>
        

        <!-- Templates -->
        <script type="text/template" id="login-tpl">
            {% include 'login-tpl.html' %}
        </script>
        <script type="text/template" id="add-to-board-tpl">
            {{ add_to_board(user_boards) }}
        </script>
        <script type="text/template" id="article-detail-tpl">
            {% include 'article-detail-tpl.html' %}
        </script>
        <script type="text/template" id="comment-tpl">
            {% include 'comment-tpl.html' %}
        </script>
        <script type="text/template" id="share-link-tpl">
            {% include 'share-link-tpl.html' %}
        </script>
        <script type="text/template" id="photo-tpl">
            {% include 'photo-tpl.html' %}
        </script>
        {% block extra_tpl %}
        {% endblock %}

        <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script>
            window.jQuery || document.write('<script src="/assets/js/libs/jquery-1.8.1.min.js"><\/script>')
        </script>
        <script src="/assets/js/libs/underscore.js"></script>
        <script src="/assets/js/libs/backbone.js"></script>
        <script src="/assets/js/plugins/bootstrap/bootstrap.min.js"></script>

        <!-- Plugins -->
        <script src="/assets/js/plugins/imagesloaded/jquery.imagesloaded.min.js"></script>
        <script src="/assets/js/plugins/autosize/jquery.autosize.js"></script>
        <script type="text/javascript" src="/assets/js/plugins/mousewheel/jquery.mousewheel-3.0.6.pack.js"></script>

        <!-- Add fancyBox -->
        <script type="text/javascript" src="/assets/js/plugins/fancybox/jquery.fancybox.pack.js?v=2.1.0"></script>
        <!-- Optionally add helpers - button, thumbnail and/or media -->
        <script type="text/javascript" src="/assets/js/plugins/fancybox/helpers/jquery.fancybox-buttons.js?v=1.0.3"></script>
        <script type="text/javascript" src="/assets/js/plugins/fancybox/helpers/jquery.fancybox-media.js?v=1.0.3"></script>
        <script type="text/javascript" src="/assets/js/plugins/fancybox/helpers/jquery.fancybox-thumbs.js?v=1.0.6"></script>
        <script src="/assets/js/plugins/moment/moment.min.js"></script>
        <script src="/assets/js/plugins/scrollmore/jquery.scrollmore.min.js"></script>

        {% block js_plugins %}
        {% endblock %}
        <!-- App -->
        <script src="/assets/js/app/namespace.js"></script>
        <script type="text/javascript">
            //<![CDATA[
            SB.User = Backbone.Model.extend({
                defaults : {
                    'id' : "-1",
                    'username' : '',
                    'about_me' : ''
                }
            })
            SB.user = new SB.User();
            SB.user.set({{user_json}});
            console.log(SB.user);
            //]]
        </script>
        {% block articles_js_data %}
        <script type="text/javascript">
            //<![CDATA[
            SB.articles = {{articles_json}};
            SB.bookmarkArticles = new Backbone.Collection();
            
            try {
                {% if bookmark_articles %}
                SB.bookmarkJson = {{bookmark_articles}};
                {% else %}
                SB.bookmarkJson = [];
                {% endif %}
                SB.bookmarkArticles.reset(SB.bookmarkJson);
                console.log(SB.bookmarkArticles);
            } catch (err) {

            }
            //]]
        </script>
        {% endblock %}
        {% block js_data %}
        {% endblock %}

        <script src="/assets/js/app/vm.js"></script>
        <script src="/assets/js/app/setup.js"></script>
        <script src="/assets/js/app/login_mod.js"></script>
        <script src="/assets/js/app/share_link.js"></script>
        <script src="/assets/js/app/comment_mod.js"></script>
        <script src="/assets/js/app/article_mod.js"></script>
        <script src="/assets/js/app/bookmark_mod.js"></script>
        {% block extra_js %}
        <script src="/assets/js/app/home.js"></script>
        {% endblock %}
    </body>
</html>
